<template>
  <div>
    <Row>
      <Col :span="24" class="form-box">
        <Form ref="form" :model="form" :label-width="80" inline>
          <FormItem label="流水单号">
            <Input v-model="form.id" placeholder="请输入查询的流水单号"></Input>
          </FormItem>
          <FormItem label="订单单号">
            <Input v-model="form.ids" placeholder="请输入查询的订单单号"></Input>
          </FormItem>
          <FormItem label="收货人">
            <Input v-model="form.name" placeholder="请输入查询的收货人名字"></Input>
          </FormItem>
          <FormItem label="订单状态">
            <Select v-model="form.state" style="width: 200px">
              <Option value="">全部</Option>
              <Option value="0">已下单</Option>
              <Option value="1">已付款</Option>
              <Option value="2">已完成</Option>
            </Select>
          </FormItem>
          <FormItem label="下单时间">
            <DatePicker @on-change="times" type="daterange" :start-date="new Date()" placement="bottom-end"
                        placeholder="请选择一个时间范围" style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="search()">搜索</Button>
          </FormItem>
        </Form>
      </Col>
      <Col :span="24">
        <div class="table-container">
          <Table border :max-height="800" stripe :columns="getCol()" :data="tableData" no-data-text="未查询到数据"
                 context-menu show-context-menu>
          </Table>
        </div>
        <div class="page-container" v-if="total > 10">
          <Page :total="total" @on-change="pageChange"></Page>
        </div>
      </Col>
    </Row>

    <Modal v-model="isShowDetail" title="订单详情" footer-hide>
      <Table border stripe :columns="getDetailCol()" :data="detailData" no-data-text="未查询到数据">
      </Table>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "order",
  mounted() {
    this.loadData()
  },
  data() {
    return {
      form: {
        id: '',
        ids: '',
        name: '',
        state: '',
        startTime: '',
        endTime: ''
      },
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      isShowDetail: false,
      detailData: []
    }
  },
  methods: {
    times(val) {
      this.form.startTime = val[0] ? val[0] + " 00:00:00" : ""
      this.form.endTime = val[1] ? val[1] + " 23:59:59" : ""
    },
    search() {
      this.loadData()
    },
    getCol() {
      let that = this;
      return [
        {title: '流水单号', key: 'orderInfoId', tooltip: true, align: 'center'},
        {title: '订单单号', key: 'orderInfoIds', tooltip: true, align: 'center'},
        {title: '收货人', key: 'harvestName', tooltip: true, align: 'center'},
        {title: '手机号', key: 'harvestPhone', tooltip: true, align: 'center'},
        {title: '收货地址', key: 'harvestAdd', tooltip: true, align: 'center'},
        {title: '详细地址', key: 'harvestAddress', tooltip: true, align: 'center'},
        {title: '运费', key: 'orderInfoFreight', tooltip: true, align: 'center'},
        {title: '实际支付', key: 'orderInfoMoneys', tooltip: true, align: 'center'},
        {title: '下单时间', key: 'orderInfoCreatime', tooltip: true, align: 'center'},
        {
          title: '订单状态', key: 'couponStatus', tooltip: true, align: 'center', width: 100, render(h, obj) {
            let val = obj.row.orderInfoStatus;
            let color, text;
            if (val == "0") {
              color = "error";
              text = "待付款";
            } else if (val == "1") {
              color = "primary";
              text = "已付款";
            } else if (val == "2") {
              color = "success";
              text = "已完成";
            }
            return h(('Tag'), {attrs: {color: color}}, text)
          }
        },
        {
          title: '订单详情', key: 'detail', tooltip: true, align: 'center', width: 100, render(h, obj) {
            return h(('Button'), {
              attrs:
                  {type: 'success'},
              on: {
                click: () => {
                  that.showDetail(obj.row.orderInfoId)
                }
              }
            }, '详情')
          }
        }
      ]
    },
    loadData() {
      let params = {
        orderId: this.form.id,
        orderIds: this.form.ids,
        name: this.form.name,
        state: this.form.state,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      let that = this;
      this.$http.postJson('/business/order', params).then(res => {
        that.total = res.total
        that.tableData = res.data
        that.pageNum = res.pageNum
        that.pageSize = res.pageSize
      })
    },
    pageChange(val) {
      this.pageNum = val;
      this.loadData();
    },
    showDetail(val) {
      let that = this;
      this.$http.get('/business/order/detail?orderId=' + val).then(res => {
        that.isShowDetail = true;
        that.detailData = res ? res : []
      })
    },
    getDetailCol() {
      return [
        {title: '订单单号', key: 'orderInfoId', tooltip: true, align: 'center'},
        {title: '商品名字', key: 'shopGoodsName', tooltip: true, align: 'center'},
        {title: '商品数量', key: 'orderInfoAmount', tooltip: true, align: 'center'},
        {title: '规格名称', key: 'shopSpecificationName', tooltip: true, align: 'center'},
        {title: '规格价格', key: 'shopSpecificationPrice', tooltip: true, align: 'center'},
        {
          title: '规格图片', key: 'shopSpecificationPicture', tooltip: true, align: 'center', render(h, obj) {
            return h(('img'), {attrs: {src: obj.row.shopSpecificationPicture, style: 'width:30px;height:30px;'}});
          }
        }
      ]
    }
  }
}
</script>

<style scoped>
.form-box {
  margin-top: 20px;
}

.table-container {
  margin: 0 auto;
  width: calc(100% - 40px);
}

.page-container {
  display: flex;
  width: calc(100% - 40px);
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
